<!--
 * @Author: songxiang songxiang0806@qq.com
 * @Date: 2025-08-28 11:07:52
 * @LastEditors: songxiang songxiang0806@qq.com
 * @LastEditTime: 2025-09-01 10:33:36
 * @FilePath: \supermap-webgl\src\components\point-cloud-theme\point-cloud-theme.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <menus-container title="电力点云数据特征看版">
    <el-form label-width="auto" size="small">
      <el-form-item label="选择显示类型">
        <el-select v-model="selectField" @change="onSelectChange">
          <el-option
            v-for="item in selectFieldOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider border-style="dashed" />
    <!-- 类别值显示风格 -->
    <el-form
      label-width="auto"
      size="small"
      v-if="selectField === 'PointCloudClassCode'"
    >
      <el-form-item
        :label="item.label"
        v-for="(item, index) in layerClassifics"
        :key="'PointCloudClassCode' + index"
      >
        <el-color-picker v-model="item.defaultColor" />
      </el-form-item>
    </el-form>
    <!-- 高度值显示风格 -->
    <el-form
      label-width="auto"
      size="small"
      v-else-if="selectField === 'VertexWeight'"
    >
      <el-form-item
        :label="item.label"
        v-for="(item, index) in layerHeightExtremum"
        :key="'VertexWeight' + index"
      >
        <el-color-picker v-model="item.color" />
      </el-form-item>
    </el-form>
    <!-- 强度值显示风格 -->
    <el-form
      label-width="auto"
      size="small"
      v-else-if="selectField === 'PointCloudIntensity'"
    >
      <el-form-item
        :label="item.label"
        v-for="(item, index) in layerIntensityExtremum"
        :key="'PointCloudIntensity' + index"
      >
        <el-color-picker v-model="item.color" />
      </el-form-item>
    </el-form>
  </menus-container>
</template>

<script lang="ts" setup>
import {} from 'vue'
import MenusContainer from '/@src/components/menus-container/menus-container.vue'
import usePointCloudTheme from './use-point-cloud-theme'

const {
  selectField,
  selectFieldOptions,
  layerClassifics,
  layerHeightExtremum,
  layerIntensityExtremum,
  onSelectChange
} = usePointCloudTheme()
</script>

<style scoped lang="scss">
@import url('./point-cloud-theme.scss');
</style>
